<template>
  <div>
    <!-- user 登录页 -->
    <div class="content">
      <div class="logins">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="primary" @click="Reset" :loading="loading"
            >获取密保</el-button
          >
        </div>
      </div>
    </div>

    <el-dialog title="重置密码" :visible.sync="dialogFormVisible">
      <el-form :model="form1">
        <el-form-item label="问题" :label-width="formLabelWidth">
          <el-input
            v-model="form1.problem"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="答案" :label-width="formLabelWidth">
          <el-input v-model="form1.answer" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { loginNow, updatePassword, updatePasswords } from "@/api/login";
export default {
  data() {
    return {
      form: {
        username: "",
      },
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: "60px",
      form1: {
        problem: "",
        answer: "",
      },
      answer: "",
    };
  },
  methods: {
    Reset() {
      if (this.form.username == "") {
        this.$message({
          message: "请输入用户名",
          type: "warning",
        });
      } else {
        this.dialogFormVisible = true;
        updatePassword(this.form).then((res) => {
          if (res.code == 200) {
            this.form1.problem = res.data.problem || "";
            this.answer = res.data.answer || "";
          }
        });
      }
    },
    sure() {
      if (this.form1.answer == this.answer) {
        updatePasswords({
          username: this.form.username,
          password: "123456",
        }).then((res) => {
          this.$message({
            message: "密码重置为 123456",
            type: "success",
          });
          this.$router.push({ path: "/userLogin" });
        });
      } else {
        this.$message({
          message: "密保错误",
          type: "error",
        });
      }
      this.dialogFormVisible = false;
      this.form1 = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.logins {
  width: 20vw;
  height: 20vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn {
  width: 100%;
  //   display: flex;
}
.btn .el-button {
  width: 100%;
}
</style>
